<template>
    <div class="rightbox">
           <!-- 上 -->
       <div class="rightitem">
             <h3>主要疫情国家治愈率</h3>
              <div class="rigth1"></div>
             
       </div>
       <!-- 中 -->
       <div class="rightitem">
          <h3>世界每周新增治愈和死亡人数</h3>
              <div class="rigth2"></div>
        
       </div>
       <!-- 下 -->
       <div class="rightitem">
          <h3>境外输入病情top10的省份</h3>
          <div class="rigth3"></div>
       </div>
    </div>
</template>
<script setup>
import { ref, reactive,onMounted } from "vue";
import {rigth1,rigth2,rigth3} from '@/compoenfun/option'

// 三
// const datathree=reactive({
//    
//   }
// })

onMounted(() => {
    $.ajax({
    url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
    dataType: "jsonp",
    success: (res) => {
      let data = JSON.parse(res.data);
      console.log(data,33);
      rigth1(data);
      rigth2(data)
      rigth3(data)
    },
  });
     
})
</script>

<style lang="scss" scoped>
.rightitem {
  width: 100%;
  height: 31%;

  margin: 15px 0 0 0;
  // box-sizing: border-box;
  // background-color: antiquewhite;
  border: 1px solid #807f7f;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  h3 {
    margin: 0;
    padding: 0;
    font-size: 21px;
    color: #fff;
    font-weight: 500;
  }
  .rigth1,
  .rigth2,
  .rigth3 {
    width: 100%;
    height: 90%;
    // background-color: #f0efef23
  }
}
</style>
